<template>
  <div class="wrapper">
    <use-header title="角色管理"/>
    <a-card>
      <a-flex justify="space-between" class="margin-bottom">
        <a-button type="primary" @click="showModal"><plus-outlined/>新增角色</a-button>
      </a-flex>
      <a-table :data-source="store.dataSource" :loading="store.loading"  :columns="columns" :pagination="tablePagination">
       <template #bodyCell="{column,record}">
         <template v-if="column.key === 'slug'">
           <a-tag :color="record.color">{{record.name}}</a-tag>
           <a-tag :color="record.color">{{record.slug}}</a-tag>
         </template>
         <template v-if="column.key === 'status'">
           <a-tag v-if="record.status" color="green">正常</a-tag>
           <a-tag v-else color="red">禁用</a-tag>
         </template>
         <template v-if="column.key === 'action'">
           <div class="table-action" v-if="record.oid">
             <span @click="showModal(record)"><edit-outlined/>编辑</span>
             <span @click="onPermission(record)"><control-outlined/>权限</span>
             <span class="danger" @click="onDelete(record.id)"><delete-outlined/>删除</span>
           </div>
           <div v-else class="text-color-gray"><ExclamationCircleFilled /> 内置角色无法修改</div>
         </template>
       </template>
      </a-table>
    </a-card>
    <role-modal v-model:open="open" v-model:form-data="dataItem"/>
    <role-permission-modal v-model:open="permissionModal" v-model:data="dataItem"/>
  </div>
</template>

<script setup lang="ts">
import UseHeader from "@/components/UseHeader.vue";
import {
  PlusOutlined,
  EditOutlined,
  ControlOutlined,
  DeleteOutlined,
  ExclamationCircleFilled
} from "@ant-design/icons-vue";
import {tablePagination} from "@/config";
import RoleModal from "@/views/admin/permission/components/RoleModal.vue";
import RolePermissionModal from "@/views/admin/permission/components/RolePermissionModal.vue";
import {onMounted, ref} from 'vue'
import {useRoleStore} from "@/store/modules/organization/role.ts";
import {Modal} from "ant-design-vue";

// 角色存储
const store = useRoleStore()
// 新增角色modal
const open = ref<boolean>(false)
//权限分配drawer
const permissionModal = ref<boolean>(false)
// 角色数据
const  dataItem = ref<PermissionRole>()
const columns = [
  {title: '角色名称', dataIndex: 'name', key: 'name',width: 200},
  {title: '角色标识', dataIndex: 'slug', key: 'slug',width: 200},
  {title: '角色描述', dataIndex: 'description', key: 'description',ellipsis: true},
  {title: '角色状态', dataIndex: 'status', key: 'status',width: 100},
  {title: '操作', key: 'action', width: 240}
]
const showModal = (record?:PermissionRole) => {
  open.value = true
  dataItem.value = record
}
const onPermission = (record:PermissionRole) => {
  permissionModal.value = true
  dataItem.value = record
}
const onDelete = (id:number) => {
  Modal.confirm({
    title: '删除角色',
    content: '确定要删除该角色吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      await store.remove(id)
    }
  })
}
onMounted(()=> store.getList())
</script>

<style scoped>

</style>